<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<style>
		.first-face {
			display: inline-flex;
		}
		
		.second-face {
			display: inline-flex;
			justify-content: center;
		}
		.third-face {
			display: inline-flex;
			justify-content: flex-end;
		}
		
		.fourth-face{
			display: inline-flex;
			align-items: center;
		}
		.fifth-face{
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
		.sixth-face{
			display: inline-flex;
			justify-content: flex-end;
			align-items: center;
		}
	</style>

	<body>

		<p>display: inline-flex</p>
		<span class="first-face">		
			<span class="pip"></span>
		</span>

		<p>display: inline-flex;<br> justify-content: center;
		</p>
		<span class="second-face">		
			<span class="pip"></span>
		</span>
		
		<p>display: inline-flex;<br> justify-content: flex-end;
		</p>
		<span class="third-face">
			<span class="pip"></span>
		</span>
		
		<p>display: inline-flex;<br> align-items: center;
		</p>
		<span class="fourth-face">
			<span class="pip"></span>
		</span>
		
		<p>display: inline-flex;<br>
			justify-content: center;<br>
			align-items: center;
		</p>
		<span class="fifth-face">
			<span class="pip"></span>
		</span>
		<p>display: inline-flex;<br> align-items: center;
		</p>
		<span class="sixth-face">
			<span class="pip"></span>
		</span>
	</body>

</html>